<!-- directive:title 本插件致力于将文件上传整理的和json对象一样好操作 -->
<!-- directive:breadcrumb 文件上传整理 -->
<div class="panel-body">
    <uib-tabset class="tab-container">
        <uib-tab heading="单上传">
            <h3>按钮-点击/拖拽选文件-保存在内存中-展示</h3>
            <p ng-show="pro.d1.name">pro.d1.name = {{ pro.d1.name }} pro.d1.size = {{ pro.d1.size }} pro.d1.type = {{ pro.d1.type }}</p>
            <div>
                <div class="btn btnFileimg" title='{{pro.d1.name || "未选择任何文件"}}'>
                    <span><img src="../../images/img.upfile.png" />点击上传</span>
                    <input fileup type="file" ng-model="pro.d1">
                </div>
                <span ng-if="pro.d1.name" class="btnText">{{pro.d1.name}}</span>
            </div>
            <script type="text/xianjs" ui-bs>
                <div class="btn btnFileimg" title='{{pro.d1.name || "未选择任何文件"}}'>
                    <span><img src="../../images/img.upfile.png" />点击上传</span>
                    <input fileup type="file" ng-model="pro.d1">
                </div>
                <span ng-if="pro.d1.name" class="btnText">{{pro.d1.name}}</span>
            </script>
        </uib-tab>
        <uib-tab heading="单上传+回调上传">
            <h3>按钮-点击/拖拽选文件-保存在内存中-回调上传</h3>
            <p ng-show="pro.d2.name">pro.d2.name = {{ pro.d2.name }} pro.d2.size = {{ pro.d2.size }} pro.d2.type = {{ pro.d2.type }}</p>
            <div>
                <div class="btn btnFileimg" title='{{pro.d2.name || "未选择任何文件"}}'>
                    <span><img src="../../images/img.upfile.png" />点击上传</span>
                    <input fileup type="file" ng-model="pro.d2" callback="pro.f2('d2','fileup')">
                </div>
                <span ng-if="pro.d2.name" class="btnText">{{pro.d2.name}}</span>
            </div>
            <script type="text/xianjs" ui-bs>
                <div class="btn btnFileimg" title='{{pro.d2.name || "未选择任何文件"}}'>
                    <span><img src="../../images/img.upfile.png" />点击上传</span>
                    <input fileup type="file" ng-model="pro.d2" callback="pro.f2('d2','fileup')">
                </div>
                <span ng-if="pro.d2.name" class="btnText">{{pro.d2.name}}</span>
            </script>
        </uib-tab>
        <uib-tab heading="多上传+回调">
            <h3>加号图-点击多选文件-保存在内存中-回调上传</h3>
            <p><span ng-repeat="row in pro.d3"> {{ row.name }} //</span></p>
            <div>
                <div class="btn btnFileimg" title='多文件点击上传'>
                    <span><img src="../../images/img.upfile.png" />多文件点击上传</span>
                    <input fileup multiple type="file" ng-model="pro.d3" callback="pro.f3('d3')">
                </div>
                <span ng-if="pro.d3.length" class="btnText">当前选择文件数 {{pro.d3.length}}</span>
            </div>
            <script type="text/xianjs" ui-bs>
                <div class="btn btnFileimg" title='多文件点击上传'>
                    <span><img src="../../images/img.upfile.png" />多文件点击上传</span>
                    <input fileup multiple type="file" ng-model="pro.d3" callback="pro.f3('d3')">
                </div>
                <span ng-if="pro.d3.length" class="btnText">当前选择文件数 {{pro.d3.length}}</span>
            </script>
        </uib-tab>
        <uib-tab heading="加号图(小郭提供)">
            <h3>加号图-点击/拖拽选文件-保存在内存中-回调上传</h3>
            <h3 class="bg-danger">FF下无法实现div下input[file]得切换回div</h3>
            <div>
                <div class="btn btnFileimgView">
                    <img ng-src='{{ pro.d4Url ? pro.d4ImgUrl+pro.d4Url : "../../images/img.addpic.jpg" }}' />
                    <input fileup type="file" ng-model="pro.d4" callback="pro.f4()">
                </div>
            </div>
            <script type="text/xianjs" ui-bs>
                <div class="btn btnFileimgView">
                    <img ng-src='{{ pro.d4Url ? pro.d4ImgUrl+pro.d4Url : "../../images/img.addpic.jpg" }}' />
                    <input fileup type="file" ng-model="pro.d4" callback="pro.f4()">
                </div>
            </script>
        </uib-tab>
        <uib-tab heading="图片预览样式">
            <div class="file-preview">
                <div class="file-preview-item">
                    <img ng-src="{{ pro.d5 }}" data-action="zoom" style="">
                    <div>
                        <div class="btn btn-default btn-xs pull-right" title="删除">
                            <i class="glyphicon glyphicon-remove"></i>
                        </div>
                    </div>
                </div>
            </div>
            <br />
            <div class="btn btn-default uploadBtn">
                点我 保存Base64格式至字段/缓存 并不上传
                <input fileup base64="true" type="file" ng-model="pro.d5">
            </div>
            <div class="btn btn-default" disabled>
                点击提交(都成字符串了,还不简单,不建议这么做,图片可能会特别大,超过post能力)
            </div>
        </uib-tab>
        <uib-tab heading="BUG记录">
            <p class="bg-danger">type=file 怎么上传同一张图片</p>
            <p class="bg-info">原因：上传事件是由onchange触发的，由于上传的是同一文件，没有change，故不会出发上传事件</p>
            <p class="bg-info">解决方法： 上传完一次后，清空input的value document.queryselector('.xxx').value = ' '</p>
            <p class="bg-info">來源：简书 作者：itxing 链接：https://www.jianshu.com/p/3d95dfcd0eb8</p>
            <p>使用代码<code>$("[file='pro.t1']").val()</code>来测试</p>
        </uib-tab>
    </uib-tabset>
</div>
